<template>
	<view class="page">
		<view class="member-center" :style="{
			  backgroundImage: `url('${bg_image}')`,
			  backgroundSize: '100% 100%',
			  height:'400rpx'
			}">
			<view class="arr" @click='back'>
				<up-icon name="arrow-left" color="#333" size="20"></up-icon>
			</view>
			<view class="fontSize-32 color-333 header-text">
				百霸学法·推广合作
			</view>
			<view class="flex space-between items-center marginTop-200" style="width: 690rpx;">
				<view class="flex items-center">
					<!-- <image src="" mode=""></image> -->
					<view class="width-96 height-96 colorBj-fff" style="border-radius: 50%;margin-right: 12rpx;">
						<image :src="info.avatar" mode="" style="width: 100%; height: 100%;border-radius: 50%;"></image>
					</view>
					<view class="">
						<view class="fontSize-32 color-333">
							{{info.username}}
						</view>
						<view class="vip fontSize-20 paddingLeft-48 box-sizing" style="color: #FD6D3D;">
							{{info.level}}
						</view>
					</view>

				</view>
				<view class="" @click="toMoney">
					<view class="fontSize-24 color-333">
						账户余额（元）
					</view>
					<view class="flex items-center">
						<view class="fontSize-56 color-333 weight-700 marginRight-14">
							{{info.balance}}
						</view>
						<up-icon name="arrow-right" color="#333" size="20"></up-icon>
					</view>
				</view>
			</view>
		</view>

		<view class="colorBj-fff content">
			<view class="fontSize-32 color-333 weight-700">
				数据统计
			</view>
			<view class="borderRadius-30 marginTop-20" style="background-color: #FAFAFA;">
				<view class="flex space-between items-center box-sizing " style="padding: 40rpx 16rpx;">
					<view class="" v-for="(item,index) in tj" :key="index">
						<view class="fontSize-44 color-333 weight-700 text-center">
							{{item.value}}
						</view>
						<view class="text-center fontSize-26 color-666">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			<view class="fontSize-32 color-333 weight-700 marginTop-60">
				我的权益
			</view>
			<view class="width-full box-sizing flex borderRadius-30 marginTop-20"
				style="background-color: #FAFAFA;padding: 24rpx 30rpx;">
				<image src="../../static/my.png" mode="" class="width-48 height-48 marginRight-16"></image>
				<view class="fontSize-28 color-333">
					百霸智育商品市场零售价{{info.discount}}折
				</view>
			</view>
			<view class="marginTop-60 flex space-between items-center">
				<view class="fontSize-32 color-333 weight-700">
					开通记录
				</view>
				<view class="flex items-center" v-if="selllist.length!=0" @click="moreClick">
					<view class="fontSize-28 color-999 marginRight-10">
						更多
					</view>
					<up-icon name="arrow-right" color="#999" size="14"></up-icon>
				</view>
			</view>
			<view class="width-full box-sizing borderRadius-30 marginTop-20"
				style="background-color: #FAFAFA; padding: 0 30rpx;" v-if="selllist.length!=0">
				<view class="flex space-between items-center box-sizing"
					style="border-bottom: 1px solid #EBEBEB; padding: 30rpx 0;" v-for="(item,index) in selllist"
					:key="index" @click="goDetail(item.pay_id)">
					<view class="flex items-center">
						<image :src="item.member_imgae" mode="" class="width-80 height-80 marginRight-16"></image>
						<view class="">
							<view class="fontSize-28 color-333 weight-700">
								{{item.member_type}}会员（¥{{item.amount}}）
							</view>
							<view class="fontSize-26 color-999 marginTop-10">
								{{item.member_tel}}
							</view>
						</view>

					</view>
					<view class="">
						<view class="">
							<view class="fontSize-26 color-999 weight-700">
								收益：¥{{item.income}}
							</view>
							<view class="fontSize-24 color-999 marginTop-10">
								{{item.pay_time}}
							</view>
						</view>
					</view>

				</view>


			</view>
			<view class="" v-if="selllist.length==0">
				<image :src="wu_image" mode="" class="width-160 height-160"
					style="display: block;margin: 0 auto;margin-top: 60rpx;"></image>
				<view class="fontSize-28 color-999 width-308 text-center" style="margin: 0 auto;margin-top: 20rpx;">
					您还没有开通过会员哦 快去开通享受更多权益吧
				</view>
			</view>
			<up-gap height="120"></up-gap>
			<view class="pos flex items-center u-flex-between">
				<view class="btn" @click="memberClick()">
					会员开通
				</view>
				<view class="btn" @click="toRecharge">
					充值
				</view>
			</view>

		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		onMounted
	} from 'vue';
	import {
		onLoad,
		onUnload,
		onShow
	} from '@dcloudio/uni-app';
	const sellIndexApi = inject('sellIndex');
	const isOpen = ref(false)
	const bg_image = ref('')
	const wu_image = ref('')
	const info = ref({})
	const tj = ref([])
	const selllist = ref([])
	onShow(() => {
		sellIndexApi().then(res => {
			console.log(res)
			bg_image.value = res.bg_image
			wu_image.value = res.wu_image
			info.value = res.info
			tj.value = res.tj
			selllist.value = res.selllist


		})
	});

	const back = () => {
		uni.navigateBack()
	}
const goDetail = (id) => {
		uni.navigateTo({
			url:'/pagesA/my/memberRecordDetail?id='+id
		})
	}
	const toRecharge = () => {
		uni.navigateTo({
			url: '/pagesA/my/accountRecharge'
		})
	}
	const toMoney = () => {
		uni.navigateTo({
			url: '/pagesA/my/rechargeRecord'
		})
	}
	const memberClick = () => {
		uni.navigateTo({
			url: '/pagesA/my/memberVip'
		})
	}
	const moreClick = () => {
		uni.navigateTo({
			url: '/pagesA/my/memberRecord'
		})
	}
</script>
<style lang="scss" scoped>
	.member-center {
		width: 100%;
		height: 400rpx;
		background-color: #D4FDE2;
		padding-left: 32rpx;
		padding-right: 72px;
		box-sizing: border-box;
		position: relative;
	}

	.vip {
		width: 102rpx;
		height: 32rpx;
		background: url('http://bbsf.oss-cn-shanghai.aliyuncs.com/english/sell/level.png') no-repeat;
		background-size: 100% 100%;
		margin-top: 12rpx;
		line-height: 32rpx;
	}

	.arr {
		position: absolute;
		left: 22rpx;
		top: 120rpx;
	}

	.header-text {
		position: absolute;
		left: 50%;
		top: 110rpx;
		transform: translateX(-50%);
	}

	.content {
		width: 100%;
		padding: 32rpx;
		box-sizing: border-box;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		margin-top: -50rpx;
		z-index: 99;
	}

	.pos {
		position: fixed;
		bottom: 42rpx;
		left: 50%;
		transform: translateX(-50%);

		.btn {
			width: 360rpx;
			height: 104rpx;
			background: #51D580;
			border-radius: 92rpx 92rpx 92rpx 92rpx;
			color: #fff;
			text-align: center;
			line-height: 104rpx;
			font-size: 32rpx;
			margin-top: 10rpx;
		}
	}
</style>
<script>
	export default {
		options: {
			styleIsolation: 'shared',
		},
	}
</script>